<!-- 编辑地址页面 -->
<template>
  <AddressTitle action="保存" @behavior="handleBehavior">编辑收货地址</AddressTitle>
  <div class="edit-address">
    <div class="edit-address-info">
      <div class="info-content">
        <span class="info-item">所在城市:</span>
        <input type="text" class="info-text" v-model="address.city">
      </div>
      <div class="info-content">
        <span class="info-item">小区/大厦/学校:</span>
        <input type="text" class="info-text" v-model="address.department">
      </div>
      <div class="info-content">
        <span class="info-item">楼号-门牌号:</span>
        <input type="text" class="info-text" v-model="address.houseNumber">
      </div>
      <div class="info-content">
        <span class="info-item">收货人:</span>
        <input type="text" class="info-text" v-model="address.name">
      </div>
      <div class="info-content">
        <span class="info-item">联系电话:</span>
        <input type="number" class="info-text" v-model="address.phone">
      </div>
    </div>
  </div>
</template>

<script>
import { ref,unref } from 'vue'
import AddressTitle from './components/addressTitle'
import { useRouter, useRoute } from 'vue-router'
import { get, post } from '@/utils/request'
import { SPECIFY_ADDRESS } from '@/api/interface'
// 向服务器提交更新并返回管理页面
const useBehavior = (router, address, id) => {
  const handleBehavior = () => {
    const time = new Date();
    const data = unref(address);
    data.updatedAt = time.toString();
    post(SPECIFY_ADDRESS + id, data)
    .then(() => router.push({ name: 'address' }))
    .catch(error => console.log(error))
  }
  return { handleBehavior }
}
// 获取指定的地址数据
const useRequest = (id) => {
  const address = ref({});
  get(SPECIFY_ADDRESS + id)
    .then(response => address.value = response.data)
    .catch(error => console.log(error))
  return { address }
}
// composition
export default {
  name: 'editAddress',
  components: { AddressTitle },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const id = route.params.id;
    const { address } = useRequest(id)
    const { handleBehavior } = useBehavior(router, address, id)
    return { handleBehavior, address }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';
@import '@/styles/theme.scss';

.edit-address {
  @include address-layout;
  @include create-edit-address;
}</style>